
<template>
	<div class="dingdanchaxun">
    <div style="background: #fff;" v-loading="loading">
      <div style="margin:20px; padding: 10px; background: rgb(216, 229, 241); color: rgb(23, 43, 76); font-size: 14px; line-height: 25px;">
        该查询链接可以添加到您的销售入口，用户可通过该链接查询到自己在店铺的订单生产和发货信息
      </div>

      <div style="padding:0 20px;">
        <div>查询链接：{{all}}</div>
        <div style="margin-top: 20px;display: flex;align-items: center;">
          查询二维码：<qrcode :value="all" id="canvas" :options="{ size: 200 }" v-if="all != ''"></qrcode>
        </div>
      </div>
      <div style=" padding: 40px 20px 20px 20px; color: rgb(23, 43, 76);  line-height: 25px;">
        订单查询展示内容设置：
        <div style="border-bottom: 2px solid black;margin-top: 20px;"></div>
      </div>

      <!-- <div style="padding: 0 20px 40px 20px;">
        <div style="display: flex;align-items: center;color: #ababab;">
        展示订单状态：
          <el-switch
            @change="changestatus"
            v-model="show_status"
            :active-value="1"
            :inactive-value="0"
            active-color="#08c9a0"
            inactive-color="#dcdcdc">
          </el-switch>
        </div>
        <div style="display: flex;align-items: center;color: #ababab;margin-top: 15px;margin-bottom: 15px;">
          订单失败展示失败原因：
          <el-switch
            @change="changestatus"
            v-model="show_reason"
            :active-value="1"
            :inactive-value="0"
            active-color="#08c9a0"
            inactive-color="#dcdcdc">
          </el-switch>
        </div>
        <div style="display: flex;align-items: center;color: #ababab;">
          展示生产号码：
          <el-switch
            @change="changestatus"
            v-model="show_mobile"
            :active-value="1"
            :inactive-value="0"
            active-color="#08c9a0"
            inactive-color="#dcdcdc">
          </el-switch>
        </div>
      </div> -->
       <!-- 这边是新版的配置 -->
       <div style="margin:40px 0 0 30px;">
                <div style="display:flex;font-size:18px">
                  生产号码展示:
                  <el-switch
                    style="display: block;margin-left: 20px;"
                    v-model="config.show_plan_mobile"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#2678FF"
                    inactive-color="#CCC"
                  ></el-switch>
                </div>
                <div style="color:#929292;font-size:16px;margin-top:10px">订单已拥有生产号码后会展示给用户</div>
              </div>
              <div style="margin:40px 0 0 30px;">
                <div style="display:flex;font-size:18px">
                  失败原因展示:
                  <el-switch
                    style="display: block;margin-left: 20px;"
                    v-model="config.show_reason"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#2678FF"
                    inactive-color="#CCC"

                  ></el-switch>
                </div>
                <div style="color:#929292;font-size:16px;margin-top:10px">当开卡失败时会展示失败原因给用户</div>
              </div>
              <div style="margin:40px 0 0 30px;">
                <div style="display:flex;font-size:18px">
                  物流轨迹展示:
                  <el-switch
                    style="display: block;margin-left: 20px;"
                    v-model="config.show_track"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#2678FF"
                    inactive-color="#CCC"

                  ></el-switch>
                </div>
                <div
                  style="color:#929292;font-size:16px;margin-top:10px"
                >该项为增值服务，开启后您的客户可以查看物流实时轨迹，0.028元/单，同一订单反复查看仅计一次费</div>
              </div>
              <div style="margin:40px 0 0 30px;">
                <div style="display:flex;font-size:18px">
                  订单状态展示:
                  <el-switch
                    style="display: block;margin-left: 20px;"
                    v-model="config.show_status"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#2678FF"
                    inactive-color="#CCC"
                  ></el-switch>
                </div>
                <div style="color:#929292;font-size:16px;margin-top:10px">会把订单当前的生产状态展示给用户</div>
              </div>
            <el-button style="width:160px;height:40px;margin-top:50px;margin-left:40px;color:white;background:#2974FF;border-radius:30px;border:0" type="primary" round @click="setConfig">保存</el-button>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import QRcode from '@xkeshi/vue-qrcode';
  export default {
    components: {
        qrcode : QRcode
    },
    name: 'dingdanchaxun',
    data() {
      return {
        loading:true,
        all:"",
        show_status:0,
        show_reason:0,
        show_mobile:0,
        config: {
            show_plan_mobile: 0,
            show_reason: 0,
            show_track: 0,
            show_status: 0
          }
      }
    },
    created() {
      this.getlist()
      this.getConfig()
    },
    methods:{


      //获取列表
      getlist: function() {

        axios.get('/api/plan-market/search/order/url')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.all = response.data.data.url
              this.show_status =response.data.data.show_status
              this.show_reason =response.data.data.show_reason
              this.show_mobile =response.data.data.show_mobile

              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //改变设置
      // changestatus(){
      //   console.log(this.show_status,this.show_reason,this.show_mobile)
      //   axios.post('/api/plan-market/shop/order/show/config',{
      //     show_status:this.show_status,
      //     show_reason:this.show_reason,
      //     show_mobile:this.show_mobile,
      //   })
      //     .then(response => {
      //       if (response.data.msg.code == 0) {
      //         this.$message({
      //           message: '设置成功',
      //           type: 'success'
      //         });
      //       } else {
      //         this.$message.error(response.data.msg.info);
      //       }
      //     })
      // }
      getConfig() {
            this.axios.get(`/api/plan-market/order-page/mini-store/info`).then(res=>{
              if(res.data.msg.code == 0){
                this.config = {...this.config,...res.data.data}
              }else{
                this.$message.error(res.data.msg.info)
              }
            })
        },
      //设置
      setConfig: function(val) {
        this.axios
        .post(`/api/plan-market/order-page/mini-store/set`, this.config)
        .then(response => {
          if (response.data.msg.code == 0) {
            this.$message.success('设置成功');
          } else {
            this.$message.error(response.data.msg.info);
          }
        });
    },
    }
  }
</script>

<style lang="scss" scoped>
  .dingdanchaxun {
    /deep/ .el-button--primary {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
  }
</style>
